<template>
  <div class="redemption-plan">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/salvation">超度与救赎</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>救赎计划管理</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title">救赎计划管理</div>
        <div class="page-subtitle">管理恶魂的救赎计划，从任务设置到奖励分配</div>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="newPlan">
          <PlusOutlined />
          新建计划
        </a-button>
        <a-button @click="viewTemplates">
          <BookOutlined />
          计划模板
        </a-button>
      </div>
    </div>

    <!-- 救赎概览统计 -->
    <div class="redemption-overview">
      <a-row :gutter="[20, 20]">
        <a-col :xs="24" :sm="12" :lg="6">
          <div class="overview-card active-plans">
            <div class="overview-icon">
              <PlayCircleOutlined />
            </div>
            <div class="overview-content">
              <div class="overview-value">{{ overviewStats.activePlans }}</div>
              <div class="overview-label">进行中计划</div>
              <div class="overview-change">
                <span class="change-text">本月新增</span>
                <span class="change-value positive">+{{ overviewStats.newPlansThisMonth }}</span>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="6">
          <div class="overview-card completed-plans">
            <div class="overview-icon">
              <CheckCircleOutlined />
            </div>
            <div class="overview-content">
              <div class="overview-value">{{ overviewStats.completedPlans }}</div>
              <div class="overview-label">已完成计划</div>
              <div class="overview-change">
                <span class="change-text">成功率</span>
                <span class="change-value success">{{ overviewStats.successRate }}%</span>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="6">
          <div class="overview-card souls-redeemed">
            <div class="overview-icon">
              <HeartOutlined />
            </div>
            <div class="overview-content">
              <div class="overview-value">{{ overviewStats.soulsRedeemed }}</div>
              <div class="overview-label">已救赎恶魂</div>
              <div class="overview-change">
                <span class="change-text">本周救赎</span>
                <span class="change-value">{{ overviewStats.thisWeekRedeemed }}</span>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="6">
          <div class="overview-card failed-plans">
            <div class="overview-icon">
              <ExclamationCircleOutlined />
            </div>
            <div class="overview-content">
              <div class="overview-value">{{ overviewStats.failedPlans }}</div>
              <div class="overview-label">失败计划</div>
              <div class="overview-change">
                <span class="change-text">失败率</span>
                <span class="change-value warning">{{ overviewStats.failureRate }}%</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 救赎进度统计 -->
    <div class="progress-stats">
      <a-row :gutter="[20, 20]">
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <RocketOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ progressStats.newTasks }}</div>
              <div class="stat-label">新任务</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <SyncOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ progressStats.inProgress }}</div>
              <div class="stat-label">进行中</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ progressStats.overdue }}</div>
              <div class="stat-label">已逾期</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <TrophyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ progressStats.rewards }}</div>
              <div class="stat-label">奖励发放</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能模块 -->
    <div class="modules-section">
      <a-row :gutter="[24, 24]">
        <!-- 救赎任务设置 -->
        <a-col :xs="24" :sm="12" :lg="12">
          <div class="module-card task-setting" @click="navigateToSubModule('tasks')">
            <div class="module-header">
              <div class="module-icon">
                <SettingOutlined />
              </div>
              <div class="module-info">
                <div class="module-title">救赎任务设置</div>
                <div class="module-description">为恶魂制定个性化的救赎任务和计划</div>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="label">活跃任务：</span>
                <span class="value">{{ moduleData.tasks.activeTasks }}</span>
              </div>
              <div class="stat-item">
                <span class="label">任务模板：</span>
                <span class="value">{{ moduleData.tasks.templates }}</span>
              </div>
            </div>
            <div class="module-actions">
              <a-button type="primary" ghost size="small">
                <ArrowRightOutlined />
                进入设置
              </a-button>
            </div>
          </div>
        </a-col>

        <!-- 救赎进度跟踪 -->
        <a-col :xs="24" :sm="12" :lg="12">
          <div class="module-card progress-tracking" @click="navigateToSubModule('progress')">
            <div class="module-header">
              <div class="module-icon">
                <LineChartOutlined />
              </div>
              <div class="module-info">
                <div class="module-title">救赎进度跟踪</div>
                <div class="module-description">实时监控恶魂的救赎进度和任务完成情况</div>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="label">监控对象：</span>
                <span class="value">{{ moduleData.progress.monitoring }}</span>
              </div>
              <div class="stat-item">
                <span class="label">完成率：</span>
                <span class="value">{{ moduleData.progress.completionRate }}%</span>
              </div>
            </div>
            <div class="module-actions">
              <a-button type="primary" ghost size="small">
                <ArrowRightOutlined />
                进入跟踪
              </a-button>
            </div>
          </div>
        </a-col>

        <!-- 救赎成功奖励 -->
        <a-col :xs="24" :sm="12" :lg="12">
          <div class="module-card success-rewards" @click="navigateToSubModule('rewards')">
            <div class="module-header">
              <div class="module-icon">
                <GiftOutlined />
              </div>
              <div class="module-info">
                <div class="module-title">救赎成功奖励</div>
                <div class="module-description">管理救赎成功后的奖励机制和分配</div>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="label">待发奖励：</span>
                <span class="value">{{ moduleData.rewards.pending }}</span>
              </div>
              <div class="stat-item">
                <span class="label">奖励类型：</span>
                <span class="value">{{ moduleData.rewards.types }}</span>
              </div>
            </div>
            <div class="module-actions">
              <a-button type="primary" ghost size="small">
                <ArrowRightOutlined />
                进入管理
              </a-button>
            </div>
          </div>
        </a-col>

        <!-- 救赎失败处理 -->
        <a-col :xs="24" :sm="12" :lg="12">
          <div class="module-card failure-handling" @click="navigateToSubModule('failure')">
            <div class="module-header">
              <div class="module-icon">
                <StopOutlined />
              </div>
              <div class="module-info">
                <div class="module-title">救赎失败处理</div>
                <div class="module-description">处理救赎失败的案例，制定后续措施</div>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="label">失败案例：</span>
                <span class="value">{{ moduleData.failure.cases }}</span>
              </div>
              <div class="stat-item">
                <span class="label">重新安排：</span>
                <span class="value">{{ moduleData.failure.rearranged }}</span>
              </div>
            </div>
            <div class="module-actions">
              <a-button type="primary" ghost size="small">
                <ArrowRightOutlined />
                进入处理
              </a-button>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 最近计划和快速操作 -->
    <a-row :gutter="[24, 24]" style="margin-top: 32px">
      <!-- 最近救赎计划 -->
      <a-col :xs="24" :lg="16">
        <div class="section-card">
          <div class="section-header">
            <h3 class="section-title">
              <HistoryOutlined />
              最近救赎计划
            </h3>
            <a-button type="link" @click="viewAllPlans">查看全部</a-button>
          </div>
          <div class="plans-list">
            <div v-for="plan in recentPlans" :key="plan.id" class="plan-item">
              <div class="plan-info">
                <div class="plan-title">{{ plan.title }}</div>
                <div class="plan-details">
                  <span class="detail-item">对象：{{ plan.target }}</span>
                  <span class="detail-item">类型：{{ plan.type }}</span>
                  <span class="detail-item">创建时间：{{ plan.createTime }}</span>
                </div>
                <div class="plan-progress">
                  <a-progress :percent="plan.progress" size="small" :stroke-color="getProgressColor(plan.progress)" />
                </div>
              </div>
              <div class="plan-status">
                <a-tag :color="getPlanStatusColor(plan.status)">{{ plan.status }}</a-tag>
              </div>
              <div class="plan-actions">
                <a-button type="text" size="small" @click="viewPlanDetail(plan.id)"> 查看详情 </a-button>
              </div>
            </div>
          </div>
        </div>
      </a-col>

      <!-- 快速操作 -->
      <a-col :xs="24" :lg="8">
        <div class="section-card">
          <div class="section-header">
            <h3 class="section-title">
              <ThunderboltOutlined />
              快速操作
            </h3>
          </div>
          <div class="quick-actions">
            <div class="action-item" @click="quickAction('urgent')">
              <div class="action-icon urgent">
                <ExclamationCircleOutlined />
              </div>
              <div class="action-content">
                <div class="action-title">紧急救赎</div>
                <div class="action-desc">处理紧急救赎案例</div>
              </div>
            </div>
            <div class="action-item" @click="quickAction('batch')">
              <div class="action-icon batch">
                <AppstoreOutlined />
              </div>
              <div class="action-content">
                <div class="action-title">批量分配</div>
                <div class="action-desc">批量分配救赎任务</div>
              </div>
            </div>
            <div class="action-item" @click="quickAction('evaluation')">
              <div class="action-icon evaluation">
                <FileSearchOutlined />
              </div>
              <div class="action-content">
                <div class="action-title">效果评估</div>
                <div class="action-desc">评估救赎效果</div>
              </div>
            </div>
            <div class="action-item" @click="quickAction('report')">
              <div class="action-icon report">
                <BarChartOutlined />
              </div>
              <div class="action-content">
                <div class="action-title">生成报告</div>
                <div class="action-desc">生成救赎统计报告</div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  PlusOutlined,
  BookOutlined,
  PlayCircleOutlined,
  CheckCircleOutlined,
  HeartOutlined,
  ExclamationCircleOutlined,
  RocketOutlined,
  SyncOutlined,
  ClockCircleOutlined,
  TrophyOutlined,
  SettingOutlined,
  LineChartOutlined,
  GiftOutlined,
  StopOutlined,
  ArrowRightOutlined,
  HistoryOutlined,
  ThunderboltOutlined,
  AppstoreOutlined,
  FileSearchOutlined,
  BarChartOutlined
} from '@ant-design/icons-vue'

const router = useRouter()

// 救赎概览统计
const overviewStats = ref({
  activePlans: 15,
  completedPlans: 127,
  soulsRedeemed: 89,
  failedPlans: 23,
  newPlansThisMonth: 8,
  successRate: 78.3,
  thisWeekRedeemed: 12,
  failureRate: 15.2
})

// 救赎进度统计
const progressStats = ref({
  newTasks: 24,
  inProgress: 15,
  overdue: 6,
  rewards: 18
})

// 模块数据
const moduleData = ref({
  tasks: {
    activeTasks: 48,
    templates: 12
  },
  progress: {
    monitoring: 15,
    completionRate: 67.5
  },
  rewards: {
    pending: 18,
    types: 6
  },
  failure: {
    cases: 23,
    rearranged: 15
  }
})

// 最近救赎计划
const recentPlans = ref([
  {
    id: 1,
    title: '贪官张某某救赎计划',
    target: '张某某',
    type: '贪污腐败',
    createTime: '2024-01-15',
    progress: 75,
    status: '进行中'
  },
  {
    id: 2,
    title: '盗贼李某某改造计划',
    target: '李某某',
    type: '偷盗抢劫',
    createTime: '2024-01-14',
    progress: 45,
    status: '进行中'
  },
  {
    id: 3,
    title: '暴徒王某某教化计划',
    target: '王某某',
    type: '暴力犯罪',
    createTime: '2024-01-13',
    progress: 100,
    status: '已完成'
  },
  {
    id: 4,
    title: '欺诈陈某某悔过计划',
    target: '陈某某',
    type: '诈骗欺诈',
    createTime: '2024-01-12',
    progress: 20,
    status: '刚开始'
  },
  {
    id: 5,
    title: '杀手刘某某救赎计划',
    target: '刘某某',
    type: '故意杀人',
    createTime: '2024-01-11',
    progress: 0,
    status: '失败'
  }
])

// 导航到子模块
const navigateToSubModule = (module) => {
  switch (module) {
    case 'tasks':
      router.push('/salvation/redemption-plan/tasks')
      break
    case 'progress':
      router.push('/salvation/redemption-plan/progress')
      break
    case 'rewards':
      router.push('/salvation/redemption-plan/rewards')
      break
    case 'failure':
      router.push('/salvation/redemption-plan/failure')
      break
  }
}

// 新建计划
const newPlan = () => {
  router.push('/salvation/redemption-plan/new')
}

// 查看模板
const viewTemplates = () => {
  router.push('/salvation/redemption-plan/templates')
}

// 查看所有计划
const viewAllPlans = () => {
  router.push('/salvation/redemption-plan/list')
}

// 查看计划详情
const viewPlanDetail = (id) => {
  router.push(`/salvation/redemption-plan/detail/${id}`)
}

// 快速操作
const quickAction = (action) => {
  switch (action) {
    case 'urgent':
      router.push('/salvation/redemption-plan/urgent')
      break
    case 'batch':
      router.push('/salvation/redemption-plan/batch')
      break
    case 'evaluation':
      router.push('/salvation/redemption-plan/evaluation')
      break
    case 'report':
      router.push('/salvation/redemption-plan/report')
      break
  }
}

// 获取计划状态颜色
const getPlanStatusColor = (status) => {
  const colors = {
    进行中: 'processing',
    已完成: 'success',
    刚开始: 'default',
    失败: 'error',
    已暂停: 'warning'
  }
  return colors[status] || 'default'
}

// 获取进度条颜色
const getProgressColor = (progress) => {
  if (progress >= 80) return '#52c41a'
  if (progress >= 60) return '#1890ff'
  if (progress >= 40) return '#faad14'
  return '#f5222d'
}

onMounted(() => {
  console.log('救赎计划管理页面已加载')
})
</script>

<style lang="scss" scoped>
.redemption-plan {
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #fff;

  // 面包屑导航
  .breadcrumb {
    margin-bottom: 24px;

    :deep(.ant-breadcrumb-link) {
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: #ffd700;
      }
    }

    :deep(.ant-breadcrumb-separator) {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .header-content {
      .page-title {
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
      }

      .page-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1rem;
      }
    }

    .header-actions {
      display: flex;
      gap: 12px;

      .ant-btn {
        height: 40px;
        padding: 0 20px;
      }
    }
  }

  // 救赎概览
  .redemption-overview {
    margin-bottom: 32px;

    .overview-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 24px;
      display: flex;
      align-items: center;
      gap: 20px;
      transition: all 0.3s ease;

      .overview-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        background: rgba(255, 255, 255, 0.1);
      }

      .overview-content {
        flex: 1;

        .overview-value {
          font-size: 2.2rem;
          font-weight: bold;
          color: #fff;
          margin-bottom: 8px;
        }

        .overview-label {
          color: rgba(255, 255, 255, 0.8);
          font-size: 1rem;
          margin-bottom: 8px;
        }

        .overview-change {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 0.9rem;

          .change-text {
            color: rgba(255, 255, 255, 0.7);
          }

          .change-value {
            font-weight: bold;

            &.positive {
              color: #4caf50;
            }

            &.success {
              color: #52c41a;
            }

            &.warning {
              color: #faad14;
            }
          }
        }
      }

      &.active-plans .overview-icon {
        color: #1890ff;
      }
      &.completed-plans .overview-icon {
        color: #52c41a;
      }
      &.souls-redeemed .overview-icon {
        color: #eb2f96;
      }
      &.failed-plans .overview-icon {
        color: #f5222d;
      }
    }
  }

  // 进度统计
  .progress-stats {
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 10px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;

      .stat-icon {
        width: 45px;
        height: 45px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        background: rgba(76, 175, 80, 0.2);
        color: #4caf50;
      }

      .stat-content {
        .stat-value {
          font-size: 1.5rem;
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .stat-label {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.85rem;
        }
      }
    }
  }

  // 功能模块
  .modules-section {
    margin-bottom: 32px;

    .module-card {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      padding: 24px;
      cursor: pointer;
      transition: all 0.3s ease;
      height: 100%;

      &:hover {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.3);
      }

      .module-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;

        .module-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.8rem;
          background: rgba(255, 255, 255, 0.1);
        }

        .module-info {
          flex: 1;

          .module-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #fff;
            margin-bottom: 8px;
          }

          .module-description {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            line-height: 1.4;
          }
        }
      }

      .module-stats {
        margin-bottom: 20px;

        .stat-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          font-size: 0.9rem;

          .label {
            color: rgba(255, 255, 255, 0.7);
          }

          .value {
            color: #ffd700;
            font-weight: bold;
          }
        }
      }

      .module-actions {
        text-align: right;
      }

      // 不同模块的图标颜色
      &.task-setting .module-icon {
        color: #2196f3;
      }
      &.progress-tracking .module-icon {
        color: #ff9800;
      }
      &.success-rewards .module-icon {
        color: #4caf50;
      }
      &.failure-handling .module-icon {
        color: #f44336;
      }
    }
  }

  // 通用卡片样式
  .section-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
    height: 100%;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 1.2rem;
        color: #fff;

        .anticon {
          color: #ffd700;
        }
      }
    }
  }

  // 计划列表
  .plans-list {
    .plan-item {
      display: flex;
      align-items: center;
      padding: 20px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      &:last-child {
        border-bottom: none;
      }

      .plan-info {
        flex: 1;

        .plan-title {
          font-weight: bold;
          color: #fff;
          font-size: 1.1rem;
          margin-bottom: 8px;
        }

        .plan-details {
          display: flex;
          gap: 16px;
          font-size: 0.8rem;
          color: rgba(255, 255, 255, 0.7);
          margin-bottom: 12px;

          .detail-item {
            &:not(:last-child) {
              position: relative;

              &::after {
                content: '|';
                position: absolute;
                right: -8px;
                color: rgba(255, 255, 255, 0.5);
              }
            }
          }
        }

        .plan-progress {
          width: 100%;

          :deep(.ant-progress-text) {
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }

      .plan-status {
        margin: 0 20px;
      }

      .plan-actions {
        .ant-btn {
          color: #ffd700;

          &:hover {
            color: #fff;
            background: rgba(255, 215, 0, 0.2);
          }
        }
      }
    }
  }

  // 快速操作
  .quick-actions {
    .action-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: 12px;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .action-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;

        &.urgent {
          background: rgba(245, 34, 45, 0.2);
          color: #f5222d;
        }

        &.batch {
          background: rgba(24, 144, 255, 0.2);
          color: #1890ff;
        }

        &.evaluation {
          background: rgba(82, 196, 26, 0.2);
          color: #52c41a;
        }

        &.report {
          background: rgba(250, 173, 20, 0.2);
          color: #faad14;
        }
      }

      .action-content {
        .action-title {
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .action-desc {
          font-size: 0.8rem;
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .redemption-plan {
    padding: 16px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-content .page-title {
        font-size: 1.5rem;
      }

      .header-actions {
        width: 100%;
        justify-content: flex-end;
      }
    }

    .overview-card {
      flex-direction: column;
      text-align: center;
      gap: 16px;

      .overview-content .overview-value {
        font-size: 1.8rem;
      }
    }

    .stat-card {
      flex-direction: column;
      text-align: center;
      gap: 12px;

      .stat-content .stat-value {
        font-size: 1.3rem;
      }
    }

    .module-card .module-header {
      flex-direction: column;
      text-align: center;
      gap: 12px;
    }

    .plan-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;

      .plan-status,
      .plan-actions {
        margin: 0;
        align-self: flex-end;
      }
    }
  }
}
</style>
